<template>
    <div class="categories">
        <van-nav-bar title="商品类目"/>
        <div class="categories-content">
            <van-sidebar class="categories-top-categories" v-model="activeKey">
                <van-sidebar-item v-for="topCategory in topCategories"
                                  :key="topCategory.id" :title="topCategory.name"
                                  @click="handleTopCategoryClick(topCategory)"/>
            </van-sidebar>
            <div class="categories-top-category-content">
                <white-space/>
                <wing-blank>
                    <top-category :category="currentTopCategory"/>
                </wing-blank>
                <white-space/>
            </div>
        </div>
        <tabbar/>
    </div>
</template>

<script>
  import Tabbar from "@/components/Tobbar"
  import { NavBar, Sidebar, SidebarItem } from "vant"
  import { catalog } from "@mall/api-services"
  import TopCategory from "@/views/categories/TopCategory"
  import WhiteSpace from "@/components/WhiteSpace"
  import WingBlank from "@/components/WingBlank"
  import * as _ from "lodash"

  export default {
    name: "Categories",
    components: {
      WingBlank,
      WhiteSpace,
      TopCategory,
      Tabbar,
      [NavBar.name]: NavBar,
      [Sidebar.name]: Sidebar,
      [SidebarItem.name]: SidebarItem,
    },
    data() {
      return {
        activeKey: 0,
        topCategories: [],
        currentTopCategory: new catalog.Category(),
      }
    },
    watch: {},
    created() {
      this.refreshCategories()
    },
    methods: {
      handleTopCategoryClick(category) {
        this.currentTopCategory = category
      },
      refreshCategories() {
        catalog.CategoryServiceV1.getCategories()
          .level(0)
          .list()
          .then(topCategories => {
            this.topCategories = topCategories
            this.currentTopCategory = _.first(topCategories)
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
    .categories {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;

        .categories-content {
            height: calc(100% - 46px - 50px);
            display: flex;

            .categories-top-categories {
                height: 100%;
            }

            .categories-top-category-content {
                flex: 1;
                background: #fff;
                overflow: auto;
            }
        }
    }
</style>
